<!-- @format -->

<script setup>
import { ref } from 'vue'
// 导入 todo 样式
import './styles/index.css'

// 代办任务列表
const todoList = ref([
  { id: 321, name: '吃饭', finished: false },
  { id: 666, name: '睡觉', finished: true },
  { id: 195, name: '打豆豆', finished: false }
])

// 任务名称
const title = ref('')

// 添加
const onAdd = () => {
  // 去除 title 的首尾空格
  const name = title.value.trim()
  // 非空校验
  if (!name) return alert('名称不能为空')
  // 给 todoList 数组的末尾添加一个新对象
  todoList.value.push({
    name, // 任务名称，利用了对象的简写
    id: Date.now(), // 时间戳
    finished: false // 刚加进来 finished 都是 false
  })
  // 清空输入框
  title.value = ''
}

// 删除
const onDel = (i) => {
  // 删除前的确认提示
  if (confirm('确认删除么')) {
    // 调用 splice() 从当前点击的位置删除1个
    todoList.value.splice(i, 1)
  }
}

// 清空
const onClear = () => {
  todoList.value = []
}
</script>

<template>
  <section clsss="todoapp">
    <header class="header">
      <h1>比特人记事本</h1>
      <input placeholder="请输入任务" class="new-todo" v-model="title" />
      <button class="add" @click="onAdd">
        添加任务
      </button>
    </header>
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item, index) in todoList" :key="item.id">
          <div class="view">
            <span class="index">{{ index + 1 }}.</span>
            <label>{{ item.name }}</label>
            <button class="destroy" @click="onDel(index)"></button>
          </div>
        </li>
      </ul>
    </section>
    <footer class="footer">
      <span class="todo-count">合 计: <strong> {{ todoList.length }} </strong></span>
      <button class="clear-completed" @click="onClear">
        清空任务
      </button>
    </footer>
  </section>
</template>
